<template>
  <div class="inbound-detail">
    <!-- 页面标题 -->
    <div class="page-title">
      <h2>入库确认详情</h2>
    </div>

    <!-- 功能按钮区 -->
    <div class="operation-bar">
      <el-button @click="handleBack">返回</el-button>
    </div>

    <!-- 表单内容 -->
    <el-form
      ref="formRef"
      :model="formData"
      label-width="120px"
      class="form-container"
      disabled
    >
      <!-- 基本信息 -->
      <div class="form-section">
        <div class="section-title">基本信息</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="入库确认编号">
              <el-input v-model="formData.code" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库确认日期">
              <el-date-picker
                v-model="formData.confirmDate"
                type="date"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库类型">
              <el-select v-model="formData.type" style="width: 100%">
                <el-option label="成品入库" value="成品入库" />
                <el-option label="还资入库" value="还资入库" />
                <el-option label="拆装入库" value="拆装入库" />
                <el-option label="半成品报废入库" value="半成品报废入库" />
                <el-option label="申请直接入库" value="申请直接入库" />
                <el-option label="库管直接入库" value="库管直接入库" />
                <el-option label="采购入库" value="采购入库" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="关联项目">
              <el-input v-model="formData.project" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库库管">
              <el-input v-model="formData.manager" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联入库申请单">
              <el-input v-model="formData.relatedApplication" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="入库确认主题">
              <el-input
                v-model="formData.subject"
                type="textarea"
                :rows="2"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 入库明细 -->
      <div class="form-section">
        <div class="section-title">入库明细</div>
        <el-table
          :data="formData.details"
          style="width: 100%"
          border
        >
          <el-table-column label="序号" type="index" width="50" />
          <el-table-column label="物料编码" prop="materialCode" min-width="120" />
          <el-table-column label="物料名称" prop="materialName" min-width="150" />
          <el-table-column label="规格型号" prop="specification" min-width="120" />
          <el-table-column label="单位" prop="unit" width="80" />
          <el-table-column label="应入库数量" prop="expectedQuantity" width="100" />
          <el-table-column label="确认入库数量" prop="actualQuantity" width="120" />
          <el-table-column label="备注" prop="remark" min-width="150" />
        </el-table>
      </div>

      <!-- 其他信息 -->
      <div class="form-section">
        <div class="section-title">其他信息</div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="formData.remark"
                type="textarea"
                :rows="3"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const formRef = ref(null)

// 表单数据
const formData = reactive({
  id: '',
  code: '',
  confirmDate: '',
  type: '',
  project: '',
  manager: '',
  relatedApplication: '',
  subject: '',
  remark: '',
  details: []
})

// 返回列表页
const handleBack = () => {
  router.push('/warehouse/inbound-confirmation')
}

// 加载详情数据
const loadDetail = async (id) => {
  try {
    // TODO: 调用获取详情接口
    const detail = {
      id,
      code: 'RK202104002',
      confirmDate: '2025-04-01',
      type: '成品入库',
      project: 'PRJ2025001',
      manager: '张研',
      relatedApplication: '生产汽车零部件用于干销售 制动总泵原始入库申请',
      subject: '生产汽车零部件用于干销售 制动总泵原始入库申请',
      remark: '',
      details: [
        {
          id: 1,
          materialCode: 'M001',
          materialName: '制动总泵',
          specification: 'ZB-001',
          unit: '个',
          expectedQuantity: 20,
          actualQuantity: 20,
          remark: ''
        }
      ]
    }
    
    // 更新表单数据
    Object.assign(formData, detail)
  } catch (error) {
    console.error('加载详情失败:', error)
    ElMessage.error('加载详情失败')
  }
}

// 组件挂载时
onMounted(() => {
  const { id, rowData } = route.query
  
  // 如果有传递行数据，优先使用行数据
  if (rowData) {
    try {
      // 解析JSON字符串获取行数据
      const parsedData = JSON.parse(rowData)
      
      // 使用传递的行数据填充表单
      Object.assign(formData, {
        id: id,
        code: parsedData.code || '',
        confirmDate: parsedData.confirmTime || '',
        type: parsedData.type || '',
        manager: parsedData.manager || '',
        subject: parsedData.subject || '',
        relatedApplication: parsedData.relatedApplication || '',
        // 其他字段保持默认值
        project: '',
        remark: '',
        // 如果没有详细数据，创建一个简单的明细行
        details: parsedData.expectedQuantity ? [
          {
            id: 1,
            materialCode: '未知',
            materialName: '未知',
            specification: '未知',
            unit: '个',
            expectedQuantity: parsedData.expectedQuantity,
            actualQuantity: parsedData.actualQuantity,
            remark: ''
          }
        ] : []
      })
      
      console.log('已加载行数据', parsedData)
    } catch (error) {
      console.error('解析行数据失败:', error)
      // 如果解析失败，尝试通过ID加载详情
      if (id) {
        loadDetail(id)
      }
    }
  } 
  // 如果没有行数据但有ID，则通过API加载详情
  else if (id) {
    loadDetail(id)
  }
})
</script>

<style scoped>
.inbound-detail {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-title {
  margin-bottom: 20px;
}

.page-title h2 {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  margin: 0;
  padding: 0;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.form-container {
  margin-top: 20px;
}

.form-section {
  margin-bottom: 30px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

:deep(.el-form-item__label) {
  font-weight: normal;
}

:deep(.el-table) {
  --el-table-header-bg-color: #f5f7fa;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

:deep(.el-button) {
  font-weight: 400;
  padding: 8px 16px;
}
</style>